<template>
	<div class="box_cont">
		<div class="sele_box  flex_center_between">
			<div class="item bgRed">
				<p class="value">{{ userInfo.statistics && userInfo.statistics.learnClassHour30 || 0 }}</p>
				<p class="text">30分钟次数</p>
			</div>
			<div class="item bgy">
				<p class="value">{{ userInfo.statistics && userInfo.statistics.learnClassHour60 || 0 }}</p>
				<p class="text">60分钟次数</p>
			</div>
			<!-- <div class="item bgc"> 
            <p class="value">{{ userInfo.statistics && userInfo.statistics.learnClassHour120 || 0 }}</p>
            <p class="text">120分钟次数</p>
        </div> -->
			<div class="item bglight">
				<p class="value">{{ userInfo.statistics && userInfo.statistics.trialCourse || 0 }}</p>
				<p class="text">体验课次数</p>
			</div>
			<div class="item bgdeep">
				<p class="value">{{ userInfo.statistics && userInfo.statistics.totalTeachHours || 0 }}</p>
				<p class="text">累计时长</p>
			</div>
			<div class="item bgblue">
				<p class="value">{{ totalTeachNum }}</p>
				<p class="text">上课总次数</p>
			</div>
			<!-- <div class="item bgGreen"> 
            <p class="value">￥ {{ userInfo.statistics && userInfo.statistics.totalBrokerage || 0 }}</p>
            <p class="text">佣金</p>
        </div> -->
		</div>
		<el-card shadow="never" :border="false" v-loading="loading">
			<!-- 配置头部 -->
			<template #header>
				<div class="header">
					<span class="title_text">销课记录</span>
					<el-input class="search cur search-list" style="width: 280px;border-radius: 20px;"
						placeholder="请输入学员姓名搜索" v-model="search.userName">
						<template slot="append">
							<div @click="searchFun">搜索</div>
						</template>
					</el-input>
				</div>
			</template>
			<!-- 内容部分 -->
			<template>
				<div class="h_full flex_column_between" v-if="listData.length > 0">
					<el-table :data="listData" style="width: 100%;flex: 1;">
						<el-table-column prop="userName" label="学生姓名" align="left" min-width="200">
							<template #default="scope">
								<div class="flex_center">
                  <img src="@/assets/a.png" class="column-image" />
									{{ scope.row.user && scope.row.user.name || '' }}
								</div>
              </template>
						</el-table-column>
						<el-table-column show-overflow-tooltip prop="courseName" label="学习课程" width="200" align="center">
							<template #default="scope">
								{{ scope.row.course && scope.row.course.name || '' }}
							</template>
						</el-table-column>
						<el-table-column prop="courseType" label="课程类型" width="200" align="center">
							<template #default="scope">
								{{ scope.row.courseType && scope.row.courseType.name || '' }}
							</template>
						</el-table-column>
						<el-table-column prop="agent" label="所属机构" width="260" align="center">
							<template #default="scope">
								{{ scope.row.agent && scope.row.agent.name || '' }}
							</template>
						</el-table-column>
						<el-table-column prop="chargeName" label="负责人" width="200" align="center">
							<template #default="scope">
								{{ scope.row.agent && scope.row.agent.chargeName || '' }}
							</template>
						</el-table-column>
						<el-table-column prop="createdAt" label="销课时间" width="200" align="center"></el-table-column>
						<el-table-column label="操作" width="380" align="center">
							<template #default="scope">
								<div class="actions">
									<div class="print flex_center cur" @click="printFn(scope.row)">
										<img class="imgDy" src="@/assets/img/print1.png" />打印
									</div>
									<template v-if="scope.row.article?.id">
										<div class="atted flex_center" @click="toAiArticleFn(scope.row)">
											<img src="@/assets/img/atted.png" />查看阅读
										</div>
									</template>
									<template v-else>
										<div class="atted flex_center" @click="aiReadFn(scope.row)">
											<img src="@/assets/img/atted.png" />Ai阅读
										</div>
									</template>
									<div class="atted flex_center" @click="infoFun(scope.row)">
										<img src="@/assets/img/atted.png" />学习报告
									</div>
									<div class="remark flex_center" @click="commentFun(scope.row.id)">
										<img src="@/assets/img/remark.png" />评价
									</div>
								</div>
							</template>
						</el-table-column>
					</el-table>

					<!-- 分页 -->
					<div class="pagination_cont">
						<pagination :total="total" :currentPage="currentPage" :pageSize="pageSize"
							@current-change="changePage" v-if="listData.length > 0"></pagination>
					</div>

				</div>
				<template v-else>
					<empty type="1" text="暂无销课记录"></empty>
				</template>
			</template>

		</el-card>

		<bear_dialogVue ref="bearDialog" title="学习情况评价" :width="'50%'" :isShowCancel="showCommentCancel"
			:isShowConfirm="showCommentConfirm" :closeCallBack="submitCommentFun">
			<div class="atted_cont" v-loading="commentLoading">
				<div class="cont_info">
					<p class="title_time">{{ formatDate(learnInfo.createdAt) }}</p>
					<div class="text_cont">
						<div style="width: 45%;" class="">课程：《{{ learnInfo.course && learnInfo.course.name }}》</div>
						<div style="width: 35%;" class="">累计识词：{{ learnInfo.knowWords }}</div>
						<div style="width: 20%;" class="">学时：{{ learnInfo.courseType && learnInfo.courseType.name }}
						</div>
						<div style="width: 45%;" class="">助教：{{ learnInfo.teacher && learnInfo.teacher.name }}</div>
						<div style="width: 35%;" class="">学生：{{ learnInfo.user && learnInfo.user.name }}</div>
						<div style="width: 20%;" class=""></div>
					</div>
				</div>
				<div class="remark_xi flex_center">
					<span class="r_text">评星</span>
					<template v-if="!learnInfo.teacherReputation && !learnInfo.teacherComment">
						<img class="r_img cur" :src="item.active ? xi : xi1" alt=""
							v-for="(item, index) in reputationOptions" :key="index" @click="reputationClick(index)">
					</template>
					<template v-else>
						<template v-for="i in learnInfo.teacherReputation">
							<img class="r_img" src="@/assets/img/xi.png" alt="">
						</template>
						<template v-if="learnInfo.teacherReputation < 5">
							<img class="r_img" src="@/assets/img/xi_1.png" alt=""
								v-for="(item, index) in (5 - learnInfo.teacherReputation)" :key="index">
						</template>
					</template>

				</div>
				<div class="remark_input">
					<div class="labei">评价内容</div>
					<template v-if="!learnInfo.teacherReputation && !learnInfo.teacherComment">
						<el-input type="textarea" :rows="3" placeholder="请输入评价内容" v-model="teacherComment">
						</el-input>
					</template>
					<template v-else>
						<div>{{ learnInfo.teacherComment }}</div>
					</template>
				</div>
			</div>
		</bear_dialogVue>

		<!-- 学习详情 -->
		<div class="dialog_box flex_center_center" v-if="isAtted">
			<div class="detail_cont flex_center_center">
				<img class="head" :src="learnInfo.user && learnInfo.user.portrait" alt="" srcset="">
				<p class="name">{{ learnInfo.user && learnInfo.user.name }}</p>
				<p class="text">{{ formatDate(learnInfo.createdAt) }} 《{{ learnInfo.course && learnInfo.course.name }}》
				</p>
				<div class="info flex_center_between">
					<div class="line">
						<p class="number">{{ learnInfo.totalWords }}</p>
						<p class="text1">总词数</p>
					</div>
					<div class="line">
						<p class="number">{{ learnInfo.rightNumber }}</p>
						<p class="text1">正确数</p>
					</div>
					<div class="line">
						<p class="number">{{ learnInfo.wrongNumber }}</p>
						<p class="text1">错误数</p>
					</div>
				</div>
				<div @click="isAtted = false" class="dialog_btn cur">确定</div>
				<img @click="isAtted = false" class="close cur" src="@/assets/img/close.png" alt="">
			</div>
		</div>

		<!-- 学习报告 -->
		<bear_dialogVue ref="reportDialog" title="学习报告" width="700px" :isShowCancel="false" :isShowConfirm="false">
			<div style="height: 100%;display: flex;">
				<iframe style="border: none;min-height: 0;display: flex;flex-direction: column;width: 100%;flex: 1;"
					:src="reportUrl"></iframe>
			</div>
		</bear_dialogVue>

		<!-- </bear_content> -->
	</div>
</template>

<script>
import xi from '@/assets/img/xi.png'
import xi1 from '@/assets/img/xi_1.png'
import { mapState } from 'vuex'
import bear_dialogVue from '@/views/components/bear_dialog.vue'
import bear_content from '@/views/components/bear_content.vue'
import config from '@/config/index.js'
import { learnList, learnDetail, teacherComment } from '@/api/learn.js'
import { join } from '@/api/articleExercise.js'
export default {
	components: {
		bear_dialogVue,
		bear_content
	},
	data() {
		return {
			xi,
			xi1,
			loading: false,
			showCommentCancel: true,
			showCommentConfirm: true,
			commentLoading: false,
			search: {
				userName: ''
			},
			listData: [],
			currentPage: 1, // 当前页
			pageSize: 15, // 每页条数
			total: 0, // 总条数
			learnInfo: {}, // 学习详情
			textarea: '',
			isAtted: false,
			reputationOptions: [{ active: false }, { active: false }, { active: false }, { active: false }, { active: false }],
			curativeReputation: 0,
			teacherComment: '',
			totalTeachNum: 0, //上课总次数
			reportUrl: ''
		}
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo
		})
	},
	mounted() {
		this.getList()
		this.initData()
	},
	methods: {
		initData() {
			this.curativeReputation = 0
			this.teacherComment = ''
			this.showCommentCancel = true
			this.showCommentConfirm = true

			let learnClassHour30 = this.userInfo && this.userInfo.statistics ? this.userInfo.statistics.learnClassHour30 : 0
			let learnClassHour60 = this.userInfo && this.userInfo.statistics ? this.userInfo.statistics.learnClassHour60 : 0
			let learnClassHour120 = this.userInfo && this.userInfo.statistics ? this.userInfo.statistics.learnClassHour120 : 0
			let trialCourse = this.userInfo && this.userInfo.statistics ? this.userInfo.statistics.trialCourse : 0

			this.totalTeachNum = parseInt(learnClassHour30) + parseInt(learnClassHour60) + parseInt(learnClassHour120) + parseInt(trialCourse)
		},
		async getList() {
			this.loading = true
			this.search.page = this.currentPage
			await learnList(this.search).then(res => {
				this.loading = false
				if (res.error === 0) {
					this.listData = res.data.list
					this.total = res.data.total
					this.pageSize = res.data.perPage
				}
			})
		},
		searchFun() {
			this.currentPage = 1
			this.getList()
		},
		changePage(page) {
			this.currentPage = page
			this.getList()
		},
		infoFun(row) {
			this.reportUrl = config.baseUrl + '/student/report/learn-report.html?id=' + row.id + '&userId=' + row.user.id
			this.$refs.reportDialog.openDialog()
		},
		commentFun(id) {
			this.loading = true
			learnDetail({ id: id }).then(res => {
				this.loading = false
				if (res.error === 0) {
					this.learnInfo = res.data
					if (this.learnInfo.teacherReputation || this.learnInfo.teacherComment) {
						this.showCommentConfirm = false
					}
					this.$refs.bearDialog.openDialog();
				} else {
					this.$message.error(res.message)
				}
			})
		},
		//提交评价
		submitCommentFun(i) {
			if (i == 1) {
				if (!this.curativeReputation) {
					this.$message.error('请选择评星')
					return
				}
				if (!this.teacherComment) {
					this.$message.error('请输入评价内容')
					return
				}
				let params = {
					id: this.learnInfo.id,
					teacherReputation: this.curativeReputation,
					teacherComment: this.teacherComment
				}
				teacherComment(params).then(res => {
					if (res.error == 0) {
						this.$message.success('评价成功')
						this.$refs.bearDialog.closeDialog();
					} else {
						this.$message.error(res.message)
					}
				})
			}
		},
		formatDate(time) {
			if (time) {
				let createdTime = time.split('-')
				time = createdTime[0] + '.' + createdTime[1] + '.' + createdTime[2]
			}
			return time
		},
		reputationClick(index) {
			let total = this.reputationOptions.length;// 星星总数
			let idx = index + 1; //这代表选的第idx颗星-也代表应该显示的星星数量
			let starNum = this.curativeReputation;
			let startArr = this.reputationOptions

			if (starNum == 0) {
				starNum = idx;
				for (let i = 0; i < idx; i++) {
					startArr[i].active = true;
				}
			} else {
				//如果再次点击当前选中的星级-仅取消掉当前星级，保留之前的。
				if (idx == starNum) {
					for (let i = index; i < total; i++) {
						startArr[i].active = false;
					}
				}
				//如果小于当前最高星级，则直接保留当前星级
				if (idx < starNum) {
					for (let i = idx; i < starNum; i++) {
						startArr[i].active = false;
					}
				}
				//如果大于当前星级，则直接选到该星级
				if (idx > starNum) {
					for (let i = 0; i < idx; i++) {
						startArr[i].active = true;
					}
				}

				let count = 0; //计数器-统计当前有几颗星
				for (let i = 0; i < total; i++) {
					if (startArr[i].active) {
						count++;
					}
				}
				starNum = count;
			}

			this.reputationOptions = startArr
			this.curativeReputation = starNum
		},
		// Ai阅读
		aiReadFn(row) {
			console.log('aiReadFn', row)
			const courseId = row.course.id
			const userId = row.user.id
			const param = {
				courseId: courseId,
				userId: userId
			}
			if (!row.totalWords) {
				this.$message.error('该课没有提交学习后单词')
				return
			}
			this.loading = true
			join(param).then(res => {
				this.loading = false
				if (res.error == 0) {
					let exerciseId = res.data.id
					this.$router.push(`/aireading/vocabulary?exerciseId=${exerciseId}&userId=${userId}&learnId=${row.id}`);
				}
			}).finally(() => {
				this.loading = false
			}).catch(() => {
				this.loading = false
			})
		},
		toAiArticleFn(row) {
			this.$router.push(`/aireading/info?exerciseId=${row.exercise?.id || 0}&userId=${row.user.id}&articleId=${row.article.id}`);
		},
		//打印
		printFn(row) {
			let url = config.basePrintUrl + '?id=' + row.id
			window.open(url)
		}

	}
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";

.box_cont {
	display: flex;
	flex-direction: column;
}

.column-image {
	width: 5rem;
	height: 5rem;
	border-radius: 100%;
	margin-right: 10px
}

.pagination_cont {
	padding: 2rem 0 0;
}

::v-deep .el-input-group__append {
	border-radius: 0px 1rem 1rem 0px;
	color: #fff;
	background: $background-theme;
	border: 1px solid $background-theme;

}

.sele_box {
	// margin-bottom: 22px;
	padding: 2rem;

	.item {
		width: 13%;
		padding: 2rem 0;
		border-radius: 20px;
		color: #fff;
		text-align: center;

		.value {
			font-size: 3.4rem;
			font-weight: bold;
			margin-bottom: 1.5rem;
		}

		.text {
			font-size: 1.8rem;
		}
	}
}

.el-card {
	// margin-top: 25px;
	border-radius: 2rem;
	width: 100%;
	height: 100%;
	flex: 1;
	border: none;
	background-color: transparent;
	display: flex;
	flex-direction: column;

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 1.6rem;

		.title_text {
			font-size: 3.2rem;
		}

		.search {

			// border: 1px solid $background-theme;
			// border-radius: 10px 0px 0px 10px;
			::v-deep .el-input__inner {
				border-radius: 1rem 0px 0px 1rem !important;

			}
		}
	}

	.actions {
		font-size: 1.8rem;
		display: flex;
		justify-content: space-around;
		color: #666;

		>i:hover {
			color: rgba(114, 124, 245, 1);
			cursor: pointer;
		}

		.print:hover {
			color: #019E69;
			cursor: pointer;

			img {
				content: url(@/assets/img/print_1.png);
			}
		}

		.atted:hover {
			color: #019E69;
			cursor: pointer;

			img {
				content: url(@/assets/img/atted_1.png);
			}
		}

		.remark:hover {
			color: #019E69;
			cursor: pointer;

			img {
				content: url(@/assets/img/remark_1.png);
			}
		}
	}
}

.el-pagination {
	// margin-top: 2rem;
	text-align: center;
}

.el-breadcrumb {
	margin-top: 10px;
}

.el-form {
	padding-right: .4rem;
}

.el-rate {
	padding: 10px 0;
}

//  .el-card
::v-deep .el-card__header {
	border-bottom: none;
}

::v-deep .el-card__body {
	height: calc(100% - 24rem);
	padding: 2rem;
	flex: 1;
}

::v-deep .el-table::before {
	background-color: transparent !important;
}

::v-deep .el-table {
	overflow-y: scroll;
	font-size: 2rem;

	&::-webkit-scrollbar {
		width: 6px;
		height: 1px;
	}

	&::-webkit-scrollbar-thumb {
		border-radius: 5px;
		background-color: #019E69;
	}

	&::-webkit-scrollbar-track {
		background: #fff;
		border-radius: 5px;
	}
}

//  ::v-deep .el-input__inner{
// border: 1px solid $background-theme;
// border-radius: 10px 0px 0px 10px;
//  }
.atted_cont {
	padding: 4rem;

	.cont_info {
		padding: 16px;

		.title_time {
			font-size: 2rem;
			font-weight: bold;
			letter-spacing: 0em;
			color: #3A3F5E;
			margin-bottom: 1.6rem;
		}

		.text_cont {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			line-height: 3.2rem;
			font-size: 1.6rem;
			font-weight: normal;
			color: #626780;
		}
	}

	.remark_xi {
		padding: 3.2rem 0;

		.r_text {
			margin-right: 2.3rem;
			font-size: 2rem;
			color: #1A1A1A;
		}

		.r_img {
			margin-right: 16px;
		}
	}

	.remark_input {
		.labei {
			margin-bottom: 1.6rem;
			font-size: 2rem;
			color: #1A1A1A;
		}
	}
}

.dialog_box {
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .9);
	overflow: hidden;
	box-sizing: border-box;
}

.detail_cont {
	width: 35%;
	// height: 40vh;
	// background-color: #fff;
	background-image: url(@/assets/img/bj_5.png);
	// background-size: 100% 100%;
	background-size: cover;
	border-radius: 10px;
	position: relative;
	padding: 0 9.2rem 4rem;

	.head {
		width: 16.2rem;
		height: 16.2rem;
		border-radius: 50%;
		position: absolute;
		top: -8.1rem;
		z-index: 33;
		// margin-top: -81px;
	}

	.name {
		font-size: 3.2rem;
		color: #3A3F5E;
		margin-top: 10.6rem;
	}

	.text {
		font-size: 1.8rem;
		color: #626780;
		margin: 2rem 0 3.8rem;
	}

	.info {
		width: 100%;
		// height: 120px;
		background: #fff;
		border-radius: 10px;
		padding: 2.5rem 5.5rem;

		.line {
			text-align: center;

			.number {
				color: #3A3F5E;
				font-size: 4.6rem;
				font-weight: bold;
			}

			.text1 {
				color: #626780;
				font-size: 18px;
			}
		}
	}

	.dialog_btn {

		width: 100%;
		height: 5.2rem;
		line-height: 5.2rem;
		text-align: center;
		border-radius: 10px;
		background: #019E69;
		color: #fff;
		font-size: 20px;
		margin-top: 4rem;
	}

	.close {
		position: absolute;
		bottom: -80px;
	}
}
</style>
